<template>
  <div class="layout">
    <Layout>
      <Header :style="{ position: 'fixed', width: '100%', zIndex: '100' }">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">运动会比赛项目的实施与管理系统</div>
          <div class="layout-nav">
            <Submenu name="1">
              <template slot="title">
                <Icon type="md-person" />
                欢迎-{{ uname }}
              </template>
              <MenuItem name="3-1" @click.native="logOut">退出登录</MenuItem>
            </Submenu>
          </div>
        </Menu>
      </Header>
      <Content :style="{ padding: '0 10px' }">
        <div
          :style="{
            margin: '88px 20px 0',
            background: '#fff',
            minHeight: '300px'
          }"
        >
          <router-view />
        </div>
      </Content>
      <Footer class="layout-footer-center">2016-2020 &copy;运动会项目</Footer>
    </Layout>
  </div>
</template>
<script>
export default {
  data () {
    return {
      uname: window.sessionStorage.getItem('uname')
    }
  },
  methods: {
    //退出登录
    logOut () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  },
  mounted () {}
}
</script>
<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  color: #fff;
  font-size: 25px;
  font-weight: bolder;
  float: left;
  position: relative;
  top: 0px;
  left: 20px;
}
.layout-nav {
  width: 200px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
</style>
